<template>
  <div class="app-container">
    零件列表
    <!-- 表格 -->
    <el-table :data="list" border fit highlight-current-row>
      <el-table-column label="序号" width="70" align="center">
        <template slot-scope="scope">{{ (current - 1) * size + scope.$index + 1 }}</template>
      </el-table-column>
      <el-table-column prop="name" label="零件" width="400" />
      <el-table-column prop="count" label="所需零件数量" width="300" align="center">
        <template slot-scope="scope" width="70" align="center">
          <el-input-number v-model="scope.row.count" :min="0" label="所需零件数量"></el-input-number>
        </template>
      </el-table-column>
    </el-table>
    
      <!--路由跳转 -->
      <el-button type="primary" @click="putorder()">提交</el-button>
    
    
    <!-- 分页 -->
    <el-pagination
      :current-page="current"
      :page-size="size"
      :total="total"
      style="padding: 30px 0; text-align: center;"
      layout="total, prev, pager, next, jumper"
      @current-change="getList"
    />
  </div>
</template>

<script>
// component.js
import component from "@/api/component/component";

export default {
  // data:{

  // },
  data() {
    // 定义变量和初始值
    return {
      list: null, // 查询之后接口返回的集合
      current: 1, // 当前页
      size: 10, // 每页记录数
      total: 0 // 总记录数
    };
  },
  created() {
    // 页面渲染之前执行，一般调用methods
    this.getList();
  },
  methods: {
    // 查询零件种类列表的方法
    getList(current = 1) {
      //current=1 的意思是如果不传参默认current为1，传参就是传的值，和java不一样
      this.current = current;
      component
        .getComponentList(this.current, this.size)
        .then(response => {
          // 请求成功
          //response接口返回得数据
          //console.log(response)
          this.list = response.data.records;
          this.total = response.data.total;
          // console.log(this.list);
          // console.log(this.total);
        })
        .catch(error => {
          // 请求失败
          console.log(error);
        });
    },
    putorder() {
      console.log(this.list);

      component
        .putOrder(this.list)
        .then(response => {
         // console.log(response);
          //提交之后跳转到订单生成界面
          this.list = response.data.list
          console.log("跳转之前",this.list)
          this.$router.push({path:'/order/generateOrder',query:{list:this.list}});
        })
        .catch(error => {
          // 请求失败
          console.log(error);
        });
    }
  }
};
</script>